<template>
  <div style="padding: 30px">
    <!-- 参赛运动员数量 -->
    <el-form
      ref="ruleFormRef" :model="queryParams" :rules="rules" class="demo-ruleForm" :size="formSize"
      :inline="true"
      status-icon
    >
      <el-form-item label="机构（团体）名称" prop="groupName">
        <el-input v-model="queryParams.groupName" />
      </el-form-item>
      <el-form-item label="选手姓名" prop="playerName">
        <el-input v-model="queryParams.playerName" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="queryParams.phone" />
      </el-form-item>
      <el-form-item v-if="toggle" label="状态" prop="stage">
        <el-select v-model="queryParams.stage" placeholder="全部">
          <el-option label="待提交" value="0" />
          <el-option label="待审核" value="1" />
          <el-option label="审核通过" value="5" />
          <el-option label="审核不通过" value="3" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">
          查询
        </el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        <el-button type="warning" @click="exportData">导出</el-button>
      </el-form-item>
    </el-form>

    <el-radio-group v-model="tabPosition">
      <el-radio-button label="已确认" @change="isConfirm" />
      <el-radio-button label="报项人员" @change="playerList" />
    </el-radio-group>
    <br>
    <br>
    <el-radio-group v-model="info">
      <el-radio-button label="选手信息" @change="infoLeft" />
      <el-radio-button label="其他信息" @change="infoRight" />
    </el-radio-group>
    <br>
    <br>
    <br>
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column label="序号" width="50" type="index" align="center" />
      <el-table-column v-if="infoShow" label="选手姓名" min-width="80" prop="playerName" align="center" />
      <el-table-column v-if="infoShow" label="赛事名称" min-width="100" prop="cptName" align="center" />
      <el-table-column v-if="infoName" label="姓名" min-width="80" prop="name" align="center" />
      <el-table-column label="性别" min-width="80" prop="sexStr" align="center" />
      <el-table-column label="手机号" min-width="120" prop="telNo" align="center" />
      <el-table-column label="证件类型" min-width="120" prop="idcTypeStr" align="center" />
      <el-table-column label="证件号" min-width="220" prop="idcCode" align="center" />
      <el-table-column label="机构类型" min-width="120" prop="groupTypeStr" align="center">
        <template #default="props">
          <div>
            {{ props.row.groupTypeStr ? props.row.groupTypeStr : "/" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="机构简称" prop="abreviations" min-width="100" align="center" />
      <el-table-column label="机构名称" prop="groupName" min-width="100" align="center">
        <template #default="props">
          <div>
            {{ props.row.groupName || "/" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="队伍" min-width="120" prop="teamName" align="center">
        <template #default="props">
          <div>
            {{ props.row.teamName || "/" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="infoShow" label="教练" min-width="100" prop="coach" align="center">
        <template #default="props">
          <div>
            {{ props.row.coach || "/" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="!infoShow" label="身份标签" min-width="100" prop="labelStr" align="center">
        <template #default="props">
          <div>
            {{ props.row.labelStr || "/" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="infoShow" label="领队" width="100" prop="leader" align="center">
        <template #default="props">
          <div>
            {{ props.row.leader || "/" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="infoShow" label="其他" width="100" prop="other" align="center">
        <template #default="props">
          <div>
            {{ props.row.other || "/" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="infoShow" label="队医" width="100" prop="teamDoctor" align="center">
        <template #default="props">
          <div>
            {{ props.row.teamDoctor || "/" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="infoShow" label="翻译" width="100" prop="translator" align="center">
        <template #default="props">
          <div>
            {{ props.row.translator || "/" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="infoShow" label="官员" width="100" prop="official" align="center">
        <template #default="props">
          <div>
            {{ props.row.official || "/" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column v-for="(item, index) in list" :key="index" :label="item.key" min-width="120" align="center">
        <template #default="props">
          <div v-if="props.row.personInfoList">
            <div
              v-if="props.row.personInfoList?.[index]?.type == 2"
              @click="logFN(props.row.personInfoList?.[index]?.value?.url)"
            >
              <!-- pc端 -->
              <a
                v-if="props.row.personInfoList?.[index]?.value?.url" target="_blank"
                :href="props.row.personInfoList?.[index]?.value?.url"
              >{{ props.row.personInfoList?.[index]?.value?.name }}
              </a>
              <!-- 小程序 -->
              <a
                v-else-if="props.row.personInfoList?.[index]?.value[0]?.url" target="_blank"
                :href="props.row.personInfoList?.[index]?.value[0]?.url"
              >{{
                props.row.personInfoList?.[index]?.value[0]?.name }}
              </a>
              <div v-else>/</div>
            </div>

            <div v-else-if="props.row.personInfoList?.[index]?.type == 3">
              <div v-if="props.row.personInfoList?.[index]?.value && props.row.personInfoList?.[index]?.value != '/'">
                <el-image
                  v-if="props.row.personInfoList?.[index]?.value?.url" style="width: 80px; height: 80px"
                  :src="props.row.personInfoList?.[index]?.value?.url" :fit="fit"
                  @click="imgClick(props.row.personInfoList?.[index]?.value?.url)"
                />
                <el-image
                  v-else-if="props.row.personInfoList?.[index]?.value" style="width: 80px; height: 80px"
                  :src="props.row.personInfoList?.[index]?.value" :fit="fit"
                  @click="imgClick(props.row.personInfoList?.[index]?.value)"
                />
              </div>

              <div v-else>/</div>
            </div>

            <div v-else>
              <div v-if="props.row.personInfoList?.[index]?.value">
                {{ props.row.personInfoList?.[index].value }}
              </div>
              <div v-else>/</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="infoShow" label="参赛项目" min-width="240" prop="projectName" align="center">
        <template #default="props">
          <div v-html="props.row.projectName" />
        </template>
      </el-table-column>
      <el-table-column
        v-if="!toggle && infoShow" label="状态" min-width="100" prop="signStatusStr"
        align="center"
      />
      <el-table-column v-if="toggle" label="操作" min-width="100" fixed="right" align="center">
        <template #default="scope">
          <el-button
            v-if="scope.row.clearFlag != 1 && (scope.row.signStatus == 0||scope.row.signStatus == 3||scope.row.signStatus == 6)" type="text"
            @click="DelFN(scope.row)"
          >清除</el-button>
          <el-button v-else type="text" disabled>清除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog v-model="dialogVisible" title="" width="50%">
      <el-image style="width: 100%; height: 100%;" :src="bigImg" :fit="fit" />
    </el-dialog>

    <!-- 分页 -->
    <pagination
      v-if="infoShow" v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
      :total="total" @pagination="getList"
    />

    <pagination
      v-if="!infoShow" v-show="total > 0" v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize" :total="total" @pagination="getOtherList"
    />
  </div>
</template>

<script setup>
import { playerCountList, clearSignByShu, otherPeronInfo } from '@/api/match/data.js'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const router = useRoute()
const route = useRouter()
const toggle = ref(false)
const infoShow = ref(true)
const infoName = ref(false)
const cptId = ref(router.query.id)
const tableData = ref([])
const total = ref(0)
const loading = ref(true)
const tabPosition = ref('已确认')
const info = ref('选手信息')
const list = ref([])
const dialogVisible = ref(false)
const bigImg = ref()
const data = reactive({
  queryParams: {
    cptId: cptId,
    flag: toggle.value ? 1 : 0,
    groupName: undefined,
    playerName: undefined,
    phone: undefined,
    stage: undefined,
    pageNum: 1,
    pageSize: 10
  },
  ruleForm: {}
})
const { ruleForm, queryParams } = toRefs(data)

onMounted(() => {
  getList()
})

async function getList() {
  tableData.value = []
  list.value = []
  let num = 0
  loading.value = true
  const res = await playerCountList(queryParams.value)
  loading.value = false
  tableData.value = res.rows
  total.value = res.total

  for (var n of tableData.value) {
    n.lang = n.personInfoList.length
    for (var v of n.personInfoList) {
      if (v.type == 2 || v.type == 3) {
        try {
          v.value = JSON.parse(v.value)
        } catch (error) {

        }
      }
    }
  }

  tableData.value.forEach(item => {
    if (item.lang > num) {
      num = item.lang
      list.value = item.personInfoList
    }
  })
}

async function getOtherList() {
  tableData.value = []
  list.value = []
  loading.value = true
  const res = await otherPeronInfo(queryParams.value)
  loading.value = false
  tableData.value = res.rows
  total.value = res.total
}

function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

function logFN(e) {
  console.log(e)
}

// 图片放大
function imgClick(url) {
  console.log(url)
  bigImg.value = url
  dialogVisible.value = true
}

function resetQuery() {
  // debugger
  if (toggle.value) {
    queryParams.value.pageNum = 1
    queryParams.value.pageSize = 10
    queryParams.value.groupName = undefined
    queryParams.value.playerName = undefined
    queryParams.value.phone = undefined
    queryParams.value.stage = undefined
    playerList()
  } else {
    queryParams.value.pageNum = 1
    queryParams.value.pageSize = 10
    queryParams.value.groupName = undefined
    queryParams.value.playerName = undefined
    queryParams.value.phone = undefined
    queryParams.value.stage = undefined
    isConfirm()
  }
}

// 已确认按钮
function isConfirm() {
  toggle.value = false
  queryParams.value.flag = 0
  queryParams.value.pageNum = 1
  queryParams.value.groupName = undefined
  queryParams.value.palyerName = undefined
  queryParams.value.phone = undefined
  queryParams.value.stage = undefined
  if (infoShow.value) {
    getList()
  } else {
    getOtherList()
  }
}

// 报项人员名单
function playerList() {
  toggle.value = true
  queryParams.value.flag = 1
  queryParams.value.pageNum = 1
  queryParams.value.groupName = undefined
  queryParams.value.palyerName = undefined
  queryParams.value.phone = undefined
  queryParams.value.stage = undefined
  if (infoShow.value) {
    getList()
  } else {
    getOtherList()
  }
}

// 选手信息
function infoLeft(params) {
  infoShow.value = true
  infoName.value = false
  queryParams.value.pageNum = 1
  getList()
}

// 其他信息
function infoRight(params) {
  infoShow.value = false
  infoName.value = true
  queryParams.value.pageNum = 1
  getOtherList()
}

/** 导出按钮操作 */
function exportData() {
  if (infoShow.value) {
    proxy.download(
      '/league/sign/export/hasNoConfirm',
      {
        ...queryParams.value
      },
      `job_log_${new Date().getTime()}.xlsx`
    )
  } else {
    proxy.download(
      '/league/sign/export/otherPeronInfo',
      {
        ...queryParams.value
      },
      `job_log_${new Date().getTime()}.xlsx`
    )
  }
}

// 清除
function DelFN(row) {
  queryParams.value.signId = row.id
  proxy.$modal
    .confirm('是否确清除选手姓名为"' + row.playerName + '"的数据项？')
    .then(async function() {
      await clearSignByShu(queryParams.value)
    })
    .then(async() => {
      await getList()
      proxy.$modal.msgSuccess('操作成功')
    })
    .catch((err) => {
      console.log(err)
    })
}
</script>

<style scope></style>
